<script setup>
import { ref, reactive, onMounted } from 'vue'
import { reqHasCategory,reqAddOrEditCategory,reqDeleteCategory } from '@/api/product/category';
import { ElMessage } from 'element-plus';

let categoryArr = ref()  // 保存所有分类信息
let dialogVisible = ref(false)  // 用来控制 添加、编辑组件(dialog)的显示与隐藏
let categoryLevel = reactive({1:'一级分类',2:'二级分类',3:'三级分类',})
let categoryParams = reactive({
    id:0,
    level:0,
    name:'',
    pid_id:'',
})
// let menuData = reactive({  // 用来收集用户添加菜单时的数据
//     code: '',
//     level: 0,
//     name: '',
//     pid_id: 0,
//     type_mold: '',
// })

const getHasCategory = () => {
    reqHasCategory().then(res => {
        if (res.data.code == 200) {
            categoryArr.value = res.data.data
        }
    })
}

onMounted(() => {
    getHasCategory()
})
// 点击 添加分类 按钮触发事件
const addCategory = (row) => {
    dialogVisible.value = true  // 显示添加页面
    // 清空之前的数据
    Object.assign(categoryParams,{
        id:0,
        level:0,
        name:'',
        pid_id:'',
    })
    // 添加一级分类时，row为空，添加其他分类时，会传数据进来
    if(row){
        categoryParams.pid_id = row.id
        categoryParams.level = row.level+1
    }
}
// 点击 编辑分类 按钮触发事件
const editCategory = (row)=>{
    dialogVisible.value = true  // 显示添加页面

    // 收集原来的数据
    Object.assign(categoryParams,row)
    
}
// 点击 删除分类 按钮触发事件
const deleteCategory = (row) => {
    reqDeleteCategory(row.id).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            getHasCategory()
        }else{
            ElMessage({
                type:'error',
                message:'删除失败，'+res.data.msg
            })
            
        }
    })
}


// 点击 添加或编辑分类-dialog组件上面的 确定 按钮触发的事件
const save = () => {
    // 校验分类数据是否正确
    
    if(!categoryParams.name.trim()){
        ElMessage({
            type:'error',
            message:'分类名称不能为空'
        })
        return
    }
    reqAddOrEditCategory(categoryParams).then(res=>{
        if(res.data.code==200){
            ElMessage({
                type:'success',
                message:categoryParams.id ? '编辑成功':'添加成功'
            })
            dialogVisible.value = false
            getHasCategory()
        }else{
            ElMessage({
                type:'error',
                message:(categoryParams.id ? '编辑失败':'添加失败')+res.data.msg
            })
            
        }
    })

}

</script>

<template>
    <div>
        <el-card>
            <el-button v-has="`btn.Category.addOne`" type="primary" style="margin: 10px 0;" @click="addCategory()">添加一级分类</el-button>
            <!-- 展示菜单数据 -->
            <el-table :data="categoryArr" style="width: 100%; margin-bottom: 20px" row-key="id" border>
                
                <el-table-column prop="name" label="名称" show-overflow-tooltip />
                <el-table-column prop="type_mold" label="分类" width="150px">
                    <template #="{ row, $index }">
                        <p>{{ categoryLevel[row.level] }}</p>
                    </template>
                </el-table-column>
                <el-table-column prop="create_time" label="创建时间" show-overflow-tooltip />
                <el-table-column label="操作" width="280px">
                    <template #="{ row, $index }">
                        <el-button v-has="`btn.Category.add`" type="primary" size="small" icon="Plus" @click="addCategory(row)"
                            :disabled="row.level == 3">添加分类</el-button>
                        <el-button v-has="`btn.Category.edit`" type="primary" size="small" icon="Edit" @click="editCategory(row)" >编辑</el-button>
                        <el-popconfirm :title="`你确定要 ${row.name} 吗？`" width="260px" @confirm="deleteCategory(row)">
                            <template #reference>
                                <el-button v-has="`btn.Category.delete`" type="primary" size="small" icon="Delete" >删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加或编辑菜单，dialog组件 -->
            <el-dialog v-model="dialogVisible" :title="categoryParams.id ? '编辑分类' : '添加分类'">
                <el-form label-width="80px">
                    <el-form-item label="名称">
                        <el-input placeholder="请输入分类名称" v-model="categoryParams.name"></el-input>
                    </el-form-item>
                </el-form>
                <template #footer>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="save">确定</el-button>
                </template>
            </el-dialog>
        </el-card>
    </div>
</template>
<style scoped lang="scss">

</style>